---
name: Alert
menu: Components
---

import { Playground, Props } from 'docz'
import { Alert, Text } from './Alert'

# Alert

## Properties

<Props of={Alert} />

## Basic usage

<Playground>
  <Alert>
    <Text>Hello world</Text>
  </Alert>
</Playground>

## Using different kinds

<Playground>
  <Alert kind="info"><Text>Some message</Text></Alert>
  <Alert kind="positive"><Text>Some message</Text></Alert>
  <Alert kind="negative"><Text>Some message</Text></Alert>
  <Alert kind="warning"><Text>Some message</Text></Alert>
</Playground>


## Use with children as a function

<Playground>
  {() => {
    const message = 'Hello world'

    return (
      <Alert><Text>{message}</Text></Alert>
    )
  }}
</Playground>
